<template>
  <!-- 搜索模块 -->
  <div class="search-box">
    <div class="search">
      <span class="iconfont iconsearch"></span>
      <input type="search" placeholder="搜索歌曲" name="" id="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
//   position: fixed;
//   top: 70px;
//   z-index: 1;
}
.search {
  overflow: hidden;
  flex: 1;
  display: flex;
  height: 36px;
  margin: 4px 12px;
  line-height: 36px;
  border-radius: 14px;
  box-shadow: 0 0 6px rgba(200,200,200,.6);
  span {
    width: 26px;
    margin-left: 10px;
    font-size: 20px;
  }
  input {
    flex: 1;
    padding: 0 12px 0 6px;
    outline: none;
    border: none;
  }
}
</style>